<style lang='scss' scoped>
@import "@/assets/css/variable";
.addStaff {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  padding-top: 36px;
  .bar_nav {
    position: fixed;
    top: 18px;
    left: 20px;
    z-index: 2;
  }
  .title {
    margin: 12px 0;
    display: flex;
    justify-content: space-between;
    div {
      //   border: 1px solid #666;
      padding: 0.6rem 1rem;
      color: #666666;
      background-color: #f7f7f7;
    }
  }
  .customer_title {
    //   padding: 10px 0 0;
    .panle_title {
      margin: 12px 0 0;
      color: #999;
      font-size: 18px;
    }
    // .panle {
    //   width: 100%;
    //   height: 8rem;
    //   background-color: white;
    //   border-radius: 8px;
    // }

    .list {
      padding-bottom: 1rem;
      .item {
        margin-top: 1rem;
        // margin-left: 1rem;
        // margin-right: 1rem;
        padding: 1rem;
        background-color: white;
        .flex1 {
          display: flex;
          justify-content: space-between;
          height: 2.4rem;
          align-items: center;
          font-size: 1.23rem;
          padding: 0.3rem 0;
          margin-bottom: 8px;
          .panle_left {
            display: flex;
            align-items: center;
            .imgs {
              width: 30px;
              height: 30px;
              overflow: hidden;
              border-radius: 15px;
              margin-right: 10px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .nickname {
              margin-right: 12px;
              font-size: 18px;
            }
          }
        }
        .panle_two {
          box-sizing: border-box;
          display: flex;
          justify-content: space-around;
          width: 100%;
          // height: 11rem;
          border-radius: 8px;
          background-color: #f7f7f7;
          padding: 8px 0;
          color: #565656;
          .panle_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            padding: 0.5rem 0;
            font-size: 1.2rem;
            .cap-title {
              margin-top: 0.5rem;
            }
          }
        }
        .flex2 {
          display: flex;
          .flex2-left {
            flex: 0 0 10rem;
            width: 10rem;
            height: 7.5rem;
            border-radius: 0.6rem;
            img {
              width: 100%;
              height: 100%;
              border-radius: 0.6rem;
              object-fit: cover;
            }
          }

          .flex2-right {
            .title {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* 设置行数 */
              -webkit-box-orient: vertical;
              color: $color-subtitle;
              line-height: 1.2em;
            }
            .desc {
              span {
                color: #999;
              }
            }
          }
        }
        .flex3 {
          display: flex;
          justify-content: flex-end;
          .btn {
            margin-left: 1rem;
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="addStaff padding-all-m">
    <div class="bar_nav"><BarNav></BarNav></div>
    <!-- <div class="title">
      <div>浏览时间</div>
      <div>关注时间</div>
      <div>消费金额</div>
      <div>订单数量</div>
    </div> -->
    <div class="customer_title">
      <div class="panle_title">共{{ activityList.length }}位客户</div>

      <div v-if="activityList.length != 0">
        <van-pull-refresh v-model="loadingRefresh" @refresh="refreshEvent">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            offset="100"
            @load="getActivityFansPage(merchant_id)"
          >
            <div class="list">
              <div class="item" v-for="(item, i) in activityList" :key="i">
                <div class="flex1">
                  <div class="panle_left">
                    <div class="imgs" v-if="item.avatar">
                      <img :src="item.avatar" alt="" />
                    </div>
                    <span
                      class="nickname"
                      v-if="item.nickname"
                      :style="{ color: $store.getters.getMasterColor }"
                      >{{ item.nickname }}</span
                    >
                    <span>{{ item.price }}</span>
                  </div>
                  <!-- <span
                  :style="{ color: $store.getters.getMasterColor }"
                  v-if="item.actstatus == 1"
                  >倒计时{{ item.leaveDay }}天</span
                >
                <span style="color: #f5222d" v-else>已结束</span> -->
                </div>
                <div class="panle_two">
                  <div class="panle_item">
                    <span>{{ item.paysum || 0 }}</span>
                    <span class="cap-title">订单数</span>
                  </div>
                  <div class="panle_item">
                    <span>¥ {{ item.paid || 0 }}</span>
                    <span class="cap-title">支付金额</span>
                  </div>
                  <div class="panle_item">
                    <span>¥ {{ item.unpaid || 0 }}</span>
                    <span class="cap-title">未支付金额</span>
                  </div>
                  <div class="panle_item">
                    <span>¥ {{ item.refund || 0 }}</span>
                    <span class="cap-title">退款金额</span>
                  </div>
                </div>
              </div>
              <div v-if="activityList.length > 0">
                <div
                  class="load-more color-l padding-all-m margB-l margT-l"
                  v-if="finished == false"
                  @click="getActivityFansPage(merchant_id)"
                >
                  加载更多
                </div>
                <!-- <div class="no-data color-l padding-all-m margT-l" v-else>
              已经到底了
            </div> -->
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
      
      <van-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Icon, Toast, PullRefresh, Loading, Empty } from "vant";
import { myMixins } from "@/assets/js/mixins.js";
import BarNav from "@/components/BarNav";
export default {
  name: "customer",
  mixins: [myMixins],
  components: {
    [Icon.name]: Icon,
    [PullRefresh.name]: PullRefresh,
    [Loading.name]: Loading,
    [Empty.name]: Empty,
    BarNav,
  },
  data() {
    return {
      openid: "",
      fansInfo: {},
      list: [],
      pageNo: 1,
      pageSize: 10,
      loadingRefresh: false,
      loading: false,
      finished: false,
      activityList: [],
      merchant_id: null,
      totalCount: ''
    };
  },
  mounted() {
    const tabbar = JSON.parse(localStorage.getItem("tabbar"));
    document.title = tabbar[2].text;
    if (process.env.NODE_ENV == "production") {
      //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到";
    } else {
      this.openid = this.$store.state.openid;
    }
    this.getActivityFans();
    this.list = this.$store.state.activityStatus1;
    this.configItemShare();
    this.getMerchantItem();
  },
  methods: {
    // 下拉刷新
    refreshEvent() {
      this.pageNo = 1;
      this.activityList = [];
      console.log(11111111111111);
      console.log(this.merchant_id, 'this.merchant_id');
      this.getActivityFansPage(this.merchant_id);
    },
    // 获取商户id
    getMerchantItem() {
      let params = { openid: this.openid };
      this.$request.getMerchantItem(params).then((res) => {
        console.log(res.data.id, "res");
        this.merchant_id = res.data.id;
        console.log(this.merchant_id, 'this.merchant_id');
        this.getActivityFansPage(res.data.id);
      });
    },
    getActivityFansPage(id) {
      const _this = this;
      let params = {
        // openid: _this.openid, // _this.$store.state.openid
        // merchant_id: id || this.merchant_id,
        pageNo: _this.pageNo,
        pageSize: _this.pageSize,
        merchant_id: id,
      };
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      this.loading = true;
      this.loadingRefresh = true;
      console.log(params, "params");
      _this.$request
        .getActivityFansPage(params)
        .then((res) => {
          let data = res.data.data;
          const list = data.map((item) => {
            const leaveTime =
              new Date(item.end_time).getTime() - new Date().getTime();
            const leaveDay = leaveTime / 1000 / 86400;
            item.leaveDay = Math.floor(leaveDay);
            return item;
          });
          console.log(list, "list");
          _this.activityList.push(...list);
          _this.totalCount = res.data.totalCount
          console.log(_this.activityList, "_this.activityList");
          _this.$store.commit("setActivityStatus1", data);
          if (_this.pageNo >= Math.ceil(res.data.totalCount / _this.pageSize)) {
            _this.finished = true;
          } else {
            _this.pageNo++;
          }
        })
        .finally(() => {
          console.log("finally");
          this.loadingRefresh = false;
          this.loading = false;
        });
    },
    toView(item) {
      const activityData = {
        id: item.id,
        title: item.title,
        createTime: item.createtime,
        browse_num: item.browse_num,
        join_num: item.join_num,
      };
      this.$store.commit("setActivityData", activityData);
      this.$router.push("/fans/activityFans/" + item.id);
    },
    getActivityFans() {
      let params = {
        openid: this.openid,
      };
      console.log("params", params);
      this.$request.getActivityFans(params).then((res) => {
        // console.log("res", res);
        this.fansInfo = res.data;
      });
    },
  },
};
</script>